<template>
  <div
    class="footer"
    @mouseenter="up"
    @mouseleave="down"
    :class="{ up: isFooterUp }"
  >
    <!-- 注意mouseenter与mouseover的区别,简书那篇文章有,mouseleave也是 -->
    <!-- 底部播放栏 -->
    <div class="player-container">
      <!-- 播放栏左侧 -->
      <div class="player-left" @click="showDrawer">
        <img :src="imgSrc" />
        <div class="songInfo">
          <div class="font-14">{{ curSong.songInfo.name }}</div>
          <div class="font-12">{{ curSong.songInfo.ar | showArtist }}</div>
        </div>
      </div>
      <!-- 播放栏中间 -->
      <div class="player-wrap">
        <!-- 上方按钮 -->
        <div class="player-btns">
          <!-- 歌曲列表 -->
          <button @click="showSongsList">
            <i class="iconfont icon-liebiaoshunxu"></i>
          </button>
          <!-- 上一首 -->
          <button @click="previousMusic">
            <i class="iconfont icon-shangyishou"></i>
          </button>
          <!-- 暂停 -->
          <button @click="pause">
            <i v-show="isPlay" class="iconfont icon-zanting"></i>
            <i v-show="!isPlay" class="iconfont icon-bofang"></i>
          </button>
          <!-- 下一首 -->
          <button @click="nextMusic">
            <i class="iconfont icon-xiayishou"></i>
          </button>
          <!-- 喜欢该歌曲 -->
          <button>
            <i v-show="!isLiked" class="iconfont icon-aixin"></i>
            <i
              v-show="isLiked"
              style="color: #ec4141"
              class="iconfont icon-aixin1"
            ></i>
          </button>
        </div>
        <!-- 下方进度条 -->
        <div class="player-progress">
          <span class="font-12">{{ curSong.curTime | durationFormat }}</span>
          <el-slider
            v-model="current"
            class="timeSlider"
            :show-tooltip="false"
            @change="changeCurrenTime"
            :disabled="musicUrl == ''"
          ></el-slider>
          <span class="font-12">{{
            curSong.songInfo.dt
              ? curSong.songInfo.dt / 1000
              : 0 | durationFormat
          }}</span>
        </div>
      </div>
      <!-- 右侧的按钮 -->
      <div class="player-options flex">
        <!-- 音量 -->
        <div class="volume-wrap flex">
          <!-- 音量滑条 -->
          <div class="volume-slider">
            <el-slider v-model="volume" vertical height="200px"> </el-slider>
          </div>
          <!-- 点击音量图标静音 -->
          <div @click="isMute = !isMute">
            <i
              v-if="volume == 0"
              class="iconfont icon-shengyinguanbi volume-icon pointer"
            ></i>
            <i v-else class="iconfont icon-shengyin volume-icon pointer"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- 音频 -->
    <audio
      ref="audioRef"
      :src="musicUrl"
      autoplay
      @ended="nextMusic"
      @timeupdate="updateCurTime"
    ></audio>
    <!-- 歌词界面弹出 -->
    <el-drawer title="" :visible.sync="drawer" direction="btt" size="100%" ref="lyricContainer">
      <Lyric @playLyric="playLyric"></Lyric>
    </el-drawer>
    <!-- 播放列表弹出 -->
    <div class="list-drawer" v-show="isShowListDrawer">
      <div class="clear-songs">
        清空列表
      </div>
      <div class="playing-item" v-for="(item) in musicList" :key="item.id" @click="play1Song(item)">
        <div class="song-name">
          {{ item.name }}
        </div>
        <div class="artist">
          {{ item.ar | showArtist }}
        </div>
        <div class="duration">
          {{
            item.dt ? item.dt / 1000 : 0 | durationFormat
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { debounce } from '@/utils/jieliu.js'
import { mapState } from 'vuex'
import { getSongUrl } from '@/api/song.js'
import Lyric from '../Lyric/lyric.vue'
export default {
  data() {
    return {
      // musicUrl: '', // 音乐资源路径
      // 下面这两个应vuex管理起来****
      // 是否在播放
      // isPlay: false,
      // 是否喜爱该歌曲
      isLiked: false,
      // 底栏是否冒出来,一开始不冒出,鼠标移入出来,鼠标离开后,过一会再下去,感觉可以用防抖实现,分开两个函数反而感觉不好控制
      isFooterUp: false,
      // lock为false才允许播放栏下降
      // isLock: false
      // // 图片url
      imgSrc:
        'https://cdn.jsdelivr.net/gh/dingwanren/myImgCDN/202206121604984.jpg',
      // 进度条的百分比
      current: 0,
      // 是否静音
      isMute: false,
      // 静音前音量,audio放歌默认50
      volumeBeforeMute: 50,
      // 音量
      volume: 50,
      drawer: false,
      timer: null,
      isShowListDrawer: false,
      lock: false
    }
  },
  components: {
    Lyric
  },
  created() {
    this.getDetail()
    // this.getUrl()
  },
  methods: {
    // 升起播放栏
    up() {
      this.isFooterUp = true
      clearTimeout(this.timer)
    },
    // 降下去,两个函数分开反而难控制,因为要用定时器,而怎么传递定时器id挺麻烦
    // 参考了别人的实现,利用data定义一个time,再用两个函数控制,变相实现防抖
    down: function () {
      this.timer = setTimeout(() => {
        if (!this.lock) {
          this.isFooterUp = false
        }
      }, 2000)
    },
    // 播放音乐相关start
    previousMusic() {
      // 上一首歌
      // 没上一首了
      if (!this.musicList[this.curIndex - 1]) {
        // 暂停播放
        this.$store.commit('setPlayState', false)
        this.$message.error('没有上一首了喔')
      } else {
        // 还有上一首,当前播放歌曲id和下标都更改
        this.$store.commit('setCurSong', this.musicList[this.curIndex - 1])
        this.$store.commit('setCurIndex', this.curIndex - 1)
      }
    },
    nextMusic() {
      // 下一首歌
      // 没有下一首
      if (!this.musicList[this.curIndex + 1]) {
        // 暂停播放
        this.$store.commit('setPlayState', false)
        this.$message.error('没有下一首了喔')
      } else {
        // 还有下一首,当前播放歌曲id和下标都更改
        this.$store.commit('setCurSong', this.musicList[this.curIndex + 1])
        this.$store.commit('setCurIndex', this.curIndex + 1)
      }
    },
    updateCurTime() {
      // audio标签的timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发
      if (!this.$refs.audioRef) return
      /* 通过audio对象的方法获取当前时间 */
      // 这个时间能精确到这样5.453904,超过一分钟的话也是63.xxxxxx,
      const time = this.$refs.audioRef.currentTime
      /* 同步进度条 */
      if (time !== this.curSong.curTime) {
        this.$store.commit('setCurTime', time) // 存到vuex,其实我感觉这个curTime并没有用到,反而总时间倒是用来算进度条位置了
        let percent =
          ((this.curSong.curTime * 1000) / this.curSong.songInfo.dt) * 100
        percent = Math.floor(percent)
        this.current = percent // 改变slider位置
      }
    },
    changeCurrenTime(val) {
      /* 拖动进度条的回调，手动改变播放进度 */
      const time = ((val / 100) * this.curSong.songInfo.dt) / 1000
      this.$refs.audioRef.currentTime = time
      this.$store.commit('setPlayState', true) // 拖了就给他播放不然出问题
    },
    pause() {
      // 没东西就不播了
      if (this.musicUrl.length === 0) return
      // 播放改暂停,暂停就改播放
      this.$store.commit('setPlayState', !this.isPlay)
    },
    async getUrl() {
      // 一开始没歌就不加载
      if (Object.keys(this.curSong.songInfo).length === 0) {
        this.musicUrl = ''
        return
      }
      // 设个同首歌不重复请求,应该能解决刷新那个按钮还是播放的问题,问题原因是刷新会执行此函数,所以下面那个语句把状态设为播放
      const res = await getSongUrl(this.curSong.songInfo.id)
      if (res.data.code !== 200) return this.$message.error('获取歌曲失败')
      // 这个url的资源加载好了就会自动播放,audio那里设置的
      // this.musicUrl = res.data.data[0].url
      this.$store.commit('setMusicUrl', res.data.data[0].url)
      // 改成播放状态,就是双击加载完后自动播放了,但是一刷新加载完又自动播放,是audio的autoplay搞的鬼
      // 现在我都不知道搞了什么,刷新自己又不播了,但会触发这个函数,把播放状态改为true,所以刷新完播放按钮时播放状态
      setTimeout(() => {
        this.$store.commit('setPlayState', true) // 上面设置url到设置播放状态之间,估计有段时间资源没加载好的,但是有触发了play(),所以会报错,加个定时,等资源加载好就没问题了
      }, 400)
      // console.log(1)
    },
    // 当前歌曲信息
    getDetail() {
      // 一开始没歌就不加载,因为刷新后我设置了songId还在,但歌曲时长归零,所以刷新后也要获取歌的信息和url
      if (Object.keys(this.curSong.songInfo).length === 0) return
      // 歌曲信息已存在curSong.songInfo中
      this.setCover(this.curSong.songInfo.al.picUrl)
      // 更新播放历史
      this.$store.commit('setHistory', {
        type: 'update',
        data: this.curSong.songInfo
      })
    },
    // 设置底栏音乐封面
    setCover(url) {
      this.imgSrc = url
    },
    // 显示当前播放列表
    showSongsList() {
      this.isShowListDrawer = !this.isShowListDrawer
      this.lock = !this.lock // 锁住播放条
      console.log(this.musicList) // 列表对了
      console.log(this.curIndex) // 下标不对,像播放会员歌曲,没播完就下一个的话,下标并不会变
    },
    changeVolume() {
      // 音量是从0.0到1.0
      this.$refs.audioRef.volume = this.volume / 100
    },
    // 播放音乐相关end
    // 弹出歌词界面
    showDrawer() {
      if (this.musicUrl === '') return
      this.drawer = true
    },
    // 点击播放歌词对应时间
    playLyric(time) {
      this.$refs.audioRef.currentTime = time
    },
    play1Song (song) {
      this.$store.commit('playSingleSong', song)
    }
  },
  computed: {
    ...mapState(['musicList', 'isPlay', 'curSong', 'curIndex', 'musicUrl'])
  },
  watch: {
    /* 通过Vuex管理的播放状态,audio会自动播放,监听isPlay */
    isPlay(val, oldVal) {
      /* 由于misicUrl第一次是状态改变后获取，所以第一次改变不要进入监听 */
      if (this.musicUrl === '') return
      if (val) {
        // audio的play方法好像歌曲播完了再点播放就会从头播放,这是他的特点
        this.$refs.audioRef.play()
      } else {
        this.$refs.audioRef.pause()
      }
    },
    // 切歌时就是id变化,再根据id来请求歌曲信息,有点问题,问题在mutation里播放单首歌曲那里
    async 'curSong.songInfo.id'(newVal, oldVal) {
      this.getDetail()
      this.getUrl()
    },
    // 监听是否静音
    isMute() {
      if (this.isMute) {
        // 静音
        this.volumeBeforeMute = this.volume // 先保存之前音量
        this.volume = 0
      } else {
        // 解除静音,就变为静音前音量
        this.volume = this.volumeBeforeMute
      }
    },
    /* 监听音量的改变 */
    volume() {
      this.changeVolume()
    }
  }
}
</script>
<style lang="less" scoped>
.footer {
  position: fixed;
  bottom: -60px;
  width: 100%;
  height: 80px;
  opacity: 1;
  z-index: 99;
  transition: bottom 0.2s;
  // 用css做效果不稳定,有时都没有完全伸上来就掉下去了
  // &:hover{
  //   bottom: 0px;
  // }

  .player-container {
    display: flex;
    width: 100%;
    height: 60px;
    margin-top: 20px;
    background-color: rgb(255, 255, 255);
    justify-content: space-around;
    align-items: center;
  }
}
.up {
  bottom: 0;
}
.player-left {
  display: flex;
  width: 300px;
  align-items: center;
}
.player-left img {
  margin: 0 10px;
  height: 50px;
  width: 50px;
}

.songInfo {
  display: flex;
  flex-direction: column;
}

.player-wrap {
  width: 460px;
  height: 60px;
}

.player-btns {
  display: flex;
  justify-content: space-around;
  margin-top: 5px;
  button {
    outline: none;
    border: none;
    background-color: #fff;
    cursor: pointer;
    .iconfont {
      font-size: 18px;
    }
  }
}
.player-btns button:nth-child(3) {
  height: 30px;
  border-radius: 50%;
  i {
    font-size: 18px;
  }
}
.player-options {
  width: 300px;
}
.volume-wrap {
  flex-direction: column;
  position: relative;
  .volume-slider {
    display: none;
    position: absolute;
    top: -220px;
    left: -3px;
    box-shadow: 0 0 10px #bbbbbb;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 10px 0;
    margin-bottom: 50px;
  }
  &:hover .volume-slider {
    display: block;
  }
}
.volume-icon {
  font-size: 24px;
}
/* 时间进度条 */
.player-progress {
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.timeSlider {
  width: 460px;
  margin: 0 10px;
}
.list-drawer {
  width: 600px;
  height: 300px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 2px 2px #e8e8e8;
  overflow-y: auto;
  position: absolute;
  top: -280px;
  left: 50%;
  transform: translate(-50%); /* 50%为自身尺寸的一半 */
}
.clear-songs {
  position: sticky;
  top: 0;
  background-color: rgb(255, 255, 255);

}
.playing-item {
  width: 100%;
  height: 22px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  &:nth-child(odd) {
    background-color: #fff;
  }
  &:nth-child(even) {
    background-color: #eee;
  }

}

.song-name {
  width: 60%;
}

.artist {
  width: 20%;
  overflow: hidden ;//超出一行文字自动隐藏
  text-overflow: ellipsis;//文字隐藏后添加省略号
  white-space: nowrap ;//强制不换行
}

.duration {
  width: 20%;
}
</style>
